<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../Ajs/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-text="msg"></div>
    <div v-html="msg"></div>
    <div v-pre>{{msg}}</div>

    <div v-once>{{once}}</div>

    <div>
        <input type="text" v-model="model"><span v-text="model"></span>
    </div>

    <!-------------------------------------------------------------------------->

    <div>
        <span>{{num}}</span> <button v-on:click="num++">++</button><button @click="num--">--</button><button v-on:click="add()">++</button>
    </div>

    <div>
        <input type="button" value="触发事件" @click="fn1(123,$event)">
        <input type="button" value="触发事件" @click="fn2">
    </div>

    <!-------------------------------------------------------------------------->

    <div>
        <a v-bind:href="url">百度</a><a :href="url">百度</a>
    </div>
    <div>
        <p>使用 v-bind 和 v-on 实现 v-model</p>
        <input type="text" v-bind:value="val" v-on:input="val=$event.target.value">
    </div>


</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"<div>hello world</div>",
            once:"数据只显示一次，不会进行修改",
            model:"123",
            num:0,

            url:"https://www.baidu.com/",
            val:""
        },
        methods:{ //方法，有很多方法所以s
            add:function(){
                this.num++;
            },
            fn1(data,event){
                console.log(data,event);
            },
            fn2(event){
                console.log(event);
            }
        }
    })

    // 【v-cloak】 和CSS规则如[v-cloak]{ display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。这样加载页面的时候，在未加载完成时，是不会显示双大括号的

    // 【v-text】【v-html】【v-pre】

    // 【v-once】  如果后续不需要再修改，你可以使用v-once，这样可以提高性能

    // 【v-model】 双向数据绑定

    /*******************************************************************************/

    // 【v-on:事件】【@事件】

    // 事件的传参 【v-on:事件=fn(形参1,形参2,...,$event)】$event 为出发事件的对象
    //      1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
    //      2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数($event)进行

    // 事件修饰符
    //      【v-on:click.stop】   event.stopPropagation  阻止事件冒泡
    //      【v-on:click.prevent】   event.preventDefault  阻止默认行为

    // 按键修饰符
    //      【v-on:keyup.enter】   按enter键触发事件
    //      【v-on:click.delete】   按delete键触发事件

    // 自定义按键修饰符（65为键值，可以通过event.keyCode来获取）
    //      【v-on:keyup.65】   按enter键触发事件
    //       vue.config.keyCodes.aaa = 65;   【v-on:keyup.aaa】

    /********************************************************************************/

    // 【v-bind:属性】或【:属性】  动态处理属性
    // 可以使用 v-bind 和v-on 实现 v-model

</script>
</body>
</html>
